<template>
	<view>
		<view class="u-p-24">
		  <view class="block">
        <view class="flex-row flex-wrap">
          <view class="btn">2人</view>
          <view class="btn on">3人</view>
          <view class="btn">4人</view>
          <view class="btn">5人</view>
          <view class="btn">6人</view>
          <view class="btn">7人</view>
        </view>
      </view>
      
      <view class="block">
        <view class="flex-row flex-wrap">
          <view class="btn">今天</view>
          <view class="btn on">明天</view>
          <view class="btn">
            <view style="font-size: 20rpx;">11.02</view>
            <view style="font-size: 18rpx;">周六</view>
          </view>
          <view class="btn on">
            <view style="font-size: 20rpx;">11.02</view>
            <view style="font-size: 18rpx;">周六</view>
          </view>
          <view class="btn">
            <view style="font-size: 20rpx;">11.02</view>
            <view style="font-size: 18rpx;">周六</view>
          </view>
        </view>
      </view>
      
      <view class="block">
        <view class="flex-row flex-wrap">
          <view class="btn">上午</view>
          <view class="btn on">下午</view>
        </view>
      </view>
      
      <view class="block">
        <view class="flex-row flex-wrap">
          <view class="btn">大厅</view>
          <view class="btn on">包厢</view>
        </view>
        
        <view class="flex-row flex-wrap">
          <view class="btn on" v-for="i in 16" :key="i">
            <view style="font-size: 20rpx;">A11</view>
            <view style="font-size: 18rpx;">2人</view>
          </view>
        </view>
      </view>
      
      <view class="block">
        <u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label="姓名">
        	<u-input placeholder="请输入姓名" v-model="name" type="text"></u-input>
        </u-form-item>
        <u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label="电话">
        	<u-input placeholder="请输入姓名" v-model="name" type="text"></u-input>
        </u-form-item>
        <u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label="姓名">
        	<u-input placeholder="请输入姓名" v-model="name" type="text"></u-input>
        </u-form-item>
      </view>
      
      <view class="block">
        <view class="u-font-32">预定费 ￥32</view>
        
        <view class="u-p-t-24 u-font-24" style="color: #F6AD3C;">*本次预订金额可用于本次到店消费抵扣</view>
      </view>
      
      <!-- 结束 -->
		</view>
    
    <view class="u-p-t-80 u-p-b-80">
      <view class="btns flex-col justify-around" style="height: 200rpx;">
        <my-btn :size="[680, 80, 30]" color="#fff" bg="#F6AD3C" round>申请预约</my-btn>
        <my-btn :size="[680, 80, 30]" color="#F6AD3C" bg="transparent" border="2rpx solid #F6AD3C" round>取消预约</my-btn>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: ''
			};
		}
	}
</script>

<style lang="scss">
  .u-form-item {
    padding: 8rpx 0 !important;
  }
  
  .block {
    width: 702rpx;
    background: #fff;
    padding: 24rpx;
    border-radius: 20rpx;
    
    .flex-row + .flex-row {
      margin-top: 16rpx;
    }
    
    + .block {
      margin-top: 24rpx;
    }
    
    .btn {
      height: 64rpx;
      border-radius: 28rpx;
      padding: 0 24rpx;
      margin: 8rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      &.on {
        background: #FFF3E1;
        color: #F6AD3C;
      }
    }
  }
</style>
